<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>保存成功页面</title>
<script src="${basePath}jQuery Core 1.12.4/jquery-1.12.4.min.js"></script>
<!-- Bootstrap core CSS -->
<link href="${basePath}bootstrap-3.3.7-dist/css/bootstrap.min.css"
	rel="stylesheet">
<!-- Optional Bootstrap Theme -->
<link href="data:text/css;charset=utf-8,"
	data-href="${basePath}bootstrap-3.3.7-dist/css/bootstrap-theme.min.css"
	rel="stylesheet" id="bs-theme-stylesheet">
<!-- Bootstrap core JavaScript
		<!-- Placed at the end of the document so the pages load faster -->
<script src="${basePath}bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!-- 分页插件的引入 -->
<link href="${basePath}pagination-2.0.7/css/pagination.css"
	rel="stylesheet" />
<script src="${basePath}pagination-2.0.7/js/pagination.min.js"></script>
<!-- bootstrap-datetimepicker -->
<link
	href="${basePath}bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css"
	rel="stylesheet" />
<script
	src="${basePath}bootstrap-datetimepicker/js/moment-with-locales.min.js"></script>
<script
	src="${basePath}bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<!-- 加载的jquery脚本 -->
<script type="text/javascript">

	//页面加载完成时就执行该查询操作
	$(function() {
		doAjaxQuery()();
	});
	//dom加载完成时就执行该方法
	$(function() {
		$('#datetimepicker1,#datetimepicker2').datetimepicker({
			format : 'YYYY-MM-DD HH:mm:ss',
			locale : moment.locale('zh-cn')
		});

	});
</script>

<script type="text/javascript">
	function doAjaxQuery() {
		$.ajax({
			type : "POST",//请求的类型get/post
			url : "${basePatch}StudentInfoAjaxQueryServlet",//服务器url
			dataType : "json",//服务器返回的数据类型
			data : "",//没有查询条件，默认查询所有的数据进行显示
			success : function(data) { //成功之后的回调函数
				//调用分页插件的分页的行为方法
				doPaging(data);
			}
		});
	}
	//调用分页控件
	function doPaging(pageDatas) {
		//调用分页插件的分页处理方法
		$('#pager').pagination({
			dataSource : pageDatas,//分页的数据源
			pageSize : 3,//每页有几条记录
			showGoInput : true,//是否显示输入页面处理
			showGoButton : true,
			callback : function(data, pagination) {//点击分页插件时的回调方法
				//调用分页数据的解析处理方法
				parseJsonData(data);
			}
		})
	}
	//json解析处理函数
	function parseJsonData(data) {
		var strResult = "";
	
	//使用each函数进行解析

					$.each(
						data,
						function(index, eachVal) {
							strResult += "<tr>";

							strResult += "<th scope='row'>";
							strResult += index + 1;
							strResult += "</th>";

							strResult += "<td>";
							strResult += eachVal.stu_name;
							strResult += "</td>";

							strResult += "<td>";
							strResult += eachVal.stu_sex;
							strResult += "</td>";

							strResult += "<td>";
							strResult += eachVal.stu_birthday;
							strResult += "</td>";

							strResult += "<td>";
							strResult += eachVal.stu_address;
							strResult += "</td>";

							strResult += "<td>";
							strResult += eachVal.stu_tel;
							strResult += "</td>";

							strResult += "<td>";
							strResult += eachVal.stu_department;
							strResult += "</td>";

					
	strResult += "<td><img style='width: 30px; heigth: 30px;' src='";	
		strResult +=eachVal.stu_img;	
		strResult +="'></td>";

							strResult += "</tr>";
						});
		$("#tbShow").html(strResult);
	}
</script>
</head>

<body>
	<div class="bs-example" data-example-id="hoverable-table">
		<table class="table table-hover">
			<thead>
				<tr>
					<th>序号</th>
					<th>姓名</th>
					<th>性别</th>
					<th>出生日期</th>
					<th>地址</th>
					<th>电话</th>
					<th>系别</th>
					<th>头像</th>
				</tr>
			</thead>
			<tbody id="tbShow">
			</tbody>
		</table>
		<div id="pager">
			      <!-- pagination所需容器 -->
			      <div class="m-pagination"></div>
			</div>
	</div>
</body>
</html>